<template>
  <div class="details" >
    <MyHead :title="'商品详情'" :show="true"></MyHead>
    
    <div v-for="(l,i) in list" :key="i">
      <van-swipe :autoplay="3000">
        <van-swipe-item>
          <img :src=" 'https://img1.yiwugou.com/'+l.picture">
         
        </van-swipe-item>
         <van-swipe-item>
          <img :src=" 'https://img1.yiwugou.com/'+l.picture2">
         
        </van-swipe-item>
      </van-swipe>
   

    <div class="panel">
      <div class="title-con">
        
        <p> {{l.title}}  </p>
      </div>
      <div class="price-panel">
        <p> {{Math.floor(l.sellPrice/100).toFixed(2) }} </p>
      </div> 
      <div class="extra-con">
        <p>供货量  {{l.saleNumber}} 个</p>
      
      </div>
      <div class="delivery-promise">
        <p>72小时内发货</p>
      </div>
    </div>
    <div class="panel rate">
      <div class="rates">
        <h4>订单评价</h4>
        <a href="">查看全部</a>
      </div>
      <div class="rate_content">暂无评价</div>
    </div>
    <div class="panel">
      <div class="shop-con">
        <div class="left">
            <img :src=" 'https://img1.yiwugou.com/'+l.picture2">
        </div>
        <div class="right">
          <div class="shop-name">同乐玩具</div>
          <div class="shop-address">地址：义乌国际商贸城一区15门1楼7街2125</div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="intro">货号：{{l.goodsCode}} </div>
    </div>
    <div class="panel">
     
      <div class="detail-content">
          {{l.introduction}}
      </div>
    </div>
    <div class="panel">
         <div class="detail-title">商品详情</div>
        <div class="detail-content" v-html="l.detaill">


        </div>
    </div>

<van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" @click="shopping" text="购物车" :badge =  lists   />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button @click="onshoppingcar(l)" type="warning" text="加入购物车" />
      <van-goods-action-button @click="shopping" type="danger" text="立即购买" />
    </van-goods-action>
   </div>
      
   </div>
</template>

<script>
import axios from "axios";
import { Lazyload ,Dialog} from "vant";
export default {
  data() {
    return {
      id: this.$route.query.id,

      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
       
      ],
      list:[],
      lists:'',
      num:1
    };
  },
 
  methods:{
    shopping(){
          this.$router.push({name:'shopping'})

    },
      onshoppingcar(l){

      axios.get("http://localhost:3000/shoppingcar",{
        params:{
          gid:l.id,
          phone:this.appphone
        }
      })
      .then(res=>{
        console.log(res.data);
        
        if(res.data.length == 0){
              axios.post("http://localhost:3000/shoppingcar",{
              "gid":l.id,
              "title":l.title,
              "num":this.num,
              "phone":this.appphone,
              "money":l.sellPrice,
              "img":l.picture2
          }).then(res=>{
            console.log("这里是新增的增加的");
             Dialog.confirm({
                title: '加入购物车成功',
                message: '你确定要前往购物车吗',
                  })
                  .then(() => {
                      this.$router.push({name:'shopping'})
                  })
                  .catch(() => {
                      // on cancel
                  });
          })
          
        }else{
          axios.patch("http://localhost:3000/shoppingcar/"+ res.data[0].id ,{
            // "num":this.num+=1
            "num":res.data[0].num+=1
          }).then(res=>{
            console.log("这里是增加数量的");
             Dialog.confirm({
                title: '加入购物车成功',
                message: '你确定要前往购物车吗',
                  })
                  .then(() => {
                      this.$router.push({name:'shopping'})
                  })
                  .catch(() => {
                      // on cancel
                  });
          })
        }
      })

       


         
        }
  },
 
  created() {
    console.log(this.id);
    axios.get("http://localhost:3000/detail?" + "id=" + this.id).then((res) => {
      console.log(res);
      this.list = res.data
      console.log(this.list);

    });

     axios
      .get("http://localhost:3000/shoppingcar", {
        params: {
          phone: this.appphone,
        },
      })
      .then((res) => {
        console.log(res);
        this.lists = res.data.length;
        console.log(res.data.length);
      });
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;

}
.panel {
  background: #fff;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
  img {
    width: 50px;
    height: 50px;
  }
  .title-con {
    padding: 8px 0;
    height: 44px;
    p {
      color: #000;
      font-size: 14px;
    }
  }
  .price-panel {
    color: #f60;
    font-size: 16px;
  }
  .extra-con {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
  }
  .rates {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
  }
  .delivery-promise {
    padding: 8px 0;
  }
  .panel {
    background: #fff;
    padding: 0 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #999;
  }
  .rate_content {
    text-align: center;
    line-height: 20px;
    padding-bottom: 10px;
  }
  .shop-con {
    display: flex;
    padding: 10px 0;
    .left {
      margin-right: 10px;
    }
    .right {
      .shop-name {
        margin: 4px 0;
        font-size: 14px;
        color: #000;
      }
    }
  }
  .detail-title {
    padding: 16px 0;
    text-align: center;
  }
  .detail-content{
      padding: 10px ;
      width: 100%;
      overflow: hidden;
  }
  .intro{
      line-height: 22px;
      padding: 10px 0;
  }
}
</style>